<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{ $route.meta.title }}</p></div>

  <div class="ivu-card-body"><Table :columns="list.columns" :data="list.items" :loading="list.loading"></Table></div>
</div>
</template>
<script>
import qs from 'qs';
import Vue from 'vue';
import { Table, Poptip, Message } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import auth from '@/utils/auth';
import accesses from './accesses.vue';

Vue.component('Poptip', Poptip);

export default {
  components: {
    [Table.name]: Table
  },
  data() {
    return {
      token: auth.getToken(),
      list: {
        columns: [
          {type: 'expand', width: 50, align: 'center', render: (h, params) => {
          	if(typeof(params.row.accesses) === 'undefined') {
          		return h('div', '无数据');
          	}
            return h(accesses, {props: {roles_id:this.$route.params.id,accesses: params.row.accesses,access_list:params.row.access_list}}); }
          },
          {title: 'ID', key: 'id', align: 'center'},
          {title: '名称', key: 'name', align: 'center'},
          {title: '描述', key: 'description', align: 'center'},
          {title: '操作', key: 'action', align: 'center', render: (h, params) => {
            var _this = this;
            var opeare = [
              h('a', {
                class: 'ivu-btn ivu-btn-primary ivu-btn-small',
                on: {
                    click() {
                      ajaxiView.put('/backstage/account/roles/'+_this.$route.params.id+'/resources?token='+_this.token, qs.stringify({resources_id:params.row.id,allowed:1})).then(function(data) {
	                      if(data !== false) {
	                        Message.success({
	                          content: data.msg,
	                          onClose: function() {
	                            window.location.reload();
	                          }
	                        });
	
	                      }
	                    });
                    }
                  }
              }, '全允许'),
              h('a', {
                class: 'ivu-btn ivu-btn-error ivu-btn-small',
                on: {
                    click() {
                      ajaxiView.put('/backstage/account/roles/'+_this.$route.params.id+'/resources?token='+_this.token, qs.stringify({resources_id:params.row.id,allowed:0})).then(function(data) {
	                      if(data !== false) {
	                        Message.success({
	                          content: data.msg,
	                          onClose: function() {
	                            window.location.reload();
	                          }
	                        });
	
	                      }
	                    });
                    }
                  }
              }, '全禁止')
            ];

            return h('div', opeare);
          }}
        ],
        loading: false,
        items: []
      }
    };
  },
  methods: {
    getData() {
      let _this = this;
      _this.list.loading = true;
      ajaxiView.get('/backstage/account/roles/' + _this.$route.params.id + '/resources?token='+_this.token).then(function(res) {
        if(res !== false && typeof(res.models) != 'undefined') {
          _this.list.items = res.models;

          _this.list.loading = false;
        }
      });
    }
  },
  mounted() {
    this.getData();
  }
}
</script>
<style>
.ivu-table-cell .ivu-btn.ivu-btn-small {
  margin-right: 5px;
}
</style>